<template>
    <div class="markdown-content" v-html="renderedContent"></div>
  </template>
  
  <script setup lang="ts">
import { ref, computed, watchEffect } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

// 添加组件名称声明
defineOptions({
  name: 'MarkdownRenderer'
})

const props = defineProps({
  content: {
    type: String,
    required: true
  }
})

// 配置marked
marked.setOptions({
  highlight: function(code: string, lang: string) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(lang, code).value
    }
    return hljs.highlightAuto(code).value
  },
  breaks: true,
  gfm: true
})

// 渲染Markdown并净化HTML
const renderedContent = computed(() => {
  const rawHtml = marked(props.content)
  return DOMPurify.sanitize(rawHtml)
})
</script>
  
  <style scoped>
  .markdown-content {
    line-height: 1.8;
    font-size: 15px;
    color: #24292e;
    word-wrap: break-word;
    padding: 4px;
  }
  
  /* 段落样式 */
  .markdown-content :deep(p) {
    margin-bottom: 16px;
    line-height: 1.8;
  }
  
  /* 标题样式 */
  .markdown-content :deep(h1),
  .markdown-content :deep(h2),
  .markdown-content :deep(h3),
  .markdown-content :deep(h4),
  .markdown-content :deep(h5),
  .markdown-content :deep(h6) {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
  }
  
  .markdown-content :deep(h1) {
    font-size: 2em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
  }
  
  .markdown-content :deep(h2) {
    font-size: 1.5em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
  }
  
  .markdown-content :deep(h3) {
    font-size: 1.25em;
  }
  
  /* 列表样式 */
  .markdown-content :deep(ul),
  .markdown-content :deep(ol) {
    margin-bottom: 16px;
    padding-left: 2em;
  }
  
  .markdown-content :deep(li) {
    margin-bottom: 0.25em;
  }
  
  /* 代码块样式 */
  .markdown-content :deep(pre){
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
    margin-bottom: 16px;
    line-height: 1.45;
  }
  
  .markdown-content :deep(code) {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 6px;
    padding: 0.2em 0.4em;
    font-size: 85%;
  }
  
  .markdown-content :deep( pre code ){
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 100%;
  }
  
  /* 引用样式 */
  .markdown-content :deep( blockquote) {
    border-left: 4px solid #dfe2e5;
    color: #6a737d;
    padding: 0 1em;
    margin: 0 0 16px 0;
  }
  
  /* 表格样式 */
  .markdown-content :deep( table) {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 16px;
  }
  
  .markdown-content :deep( table th),
  .markdown-content :deep( table td ){
    padding: 8px 13px;
    border: 1px solid #dfe2e5;
  }
  
  .markdown-content :deep( table tr ){
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
  }
  
  .markdown-content :deep( table tr:nth-child(2n)) {
    background-color: #f6f8fa;
  }
  
  .markdown-content :deep( table th) {
    font-weight: 600;
    background-color: #f6f8fa;
  }
  
  /* 水平分割线 */
  .markdown-content :deep(hr) {
    height: 0.25em;
    padding: 0;
    margin: 24px 0;
    background-color: #e1e4e8;
    border: 0;
  }
  
  /* 图片样式 */
  .markdown-content :deep(img) {
    max-width: 100%;
    box-sizing: content-box;
  }
  
  /* 链接样式 */
  .markdown-content :deep(a) {
    color: #0366d6;
    text-decoration: none;
  }
  
  .markdown-content :deep(a:hover) {
    text-decoration: underline;
  }
  
  /* 强调样式 */
  .markdown-content :deep(strong) {
    font-weight: 600;
  }
  
  .markdown-content :deep(em) {
    font-style: italic;
  }
  </style>